<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.demoTable{
		height:40px;
		margin-top:15px;
		margin-left:100px;
	}
	.layui-form-label{
		width:28px;
	}
</style>
</head>
<body>
<div class="demoTable layui-form">
  搜索ID
  <div class="layui-inline">
    <input class="layui-input" name="id" id="id" autocomplete="off">
  </div>
  名称
  <div class="layui-inline">
    <input class="layui-input" name="name" id="name" autocomplete="off">
  </div>
   <div class="layui-inline">
      <label class="layui-form-label">分类</label>
      <div class="layui-input-inline">
        <select id="cateId"  name="cateId" lay-verify="required" lay-search="">
        </select>
      </div>
    </div>
     <div class="layui-inline">
      <label class="layui-form-label">品牌</label>
      <div class="layui-input-inline">
        <select id="brandId" name="brandId" lay-verify="required" lay-search="">
        </select>
      </div>
    </div>
     <div class="layui-inline">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline">
        <select id="status"  name="status" lay-verify="required" lay-search="">
        	<option value="">全部</option>	
        	<option value="1">上架</option>	
        	<option value="0">下架</option>	
        </select>
      </div>
    </div>
     <div class="layui-inline">
      <label class="layui-form-label">店铺</label>
      <div class="layui-input-inline">
        <select id="shopId" name="shopId" lay-verify="required" lay-search="">
        </select>
      </div>
    </div>
  <button class="layui-btn" data-type="reload">搜索</button>
  <button class="layui-btn" onclick="$('.layui-body').load('/pro/toAddSpu')" >添加</button>
</div>
<table class="layui-hide" lay-data="{id: 'test'}" id="test"></table>
<!-- 按钮 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" onclick="$('.layui-body').load('/pro/selSpuById?id={{d.id}}')" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs del" no="{{d.id}}" lay-event="del">删除</a>
</script>
<!-- 状态 -->
<script type="text/html" id="switchTpl">
		<input type="checkbox" no={{d.id}} name="status" value="{{d.status}}" lay-skin="switch" lay-text="上架|下架"  lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script>
	//加载分类
	function loadCate(){
		$.ajax({
			   type: "get",
			   url: "/pro/allCate",
			   async: false,
			   success: function(data){
				   var $cate = $("#cateId");
				   $cate.html("<option value=\"\">全部</option>");
				   $(data).each(function(i,n){
					   $cate.append("<option value="+n.id+">"+n.name+"</option>");
				   })
			   }
			});
	}
	//加载品牌
	function loadBrand(){
		$.ajax({
			   type: "get",
			   url: "/pro/allBrand",
			   async: false,
			   success: function(data){
				   var $brand = $("#brandId");
				   $brand.html("<option value=\"\">全部</option>");
				   $(data).each(function(i,n){
					   $brand.append("<option value="+n.id+">"+n.name+"</option>");
				   })
			   }
			});
	}
	//加载店铺
	function loadShop(){
		$.ajax({
			   type: "get",
			   url: "/pro/allShop",
			   async: false,
			   success: function(data){
				   var $shop = $("#shopId");
				   $shop.html("<option value=\"\">全部</option>");
				   $(data).each(function(i,n){
					   $shop.append("<option value="+n.id+">"+n.name+"</option>");
				   })
			   }
			});
	}
	layui.use(['table','form'], function(){
		 var table = layui.table
		 ,form = layui.form;
		 table.render({
		    elem: '#test'
		    ,url:'/pro/spuPage'
		    ,cols: [[
		      {field:'id', title: 'ID', sort: true}
		      ,{field:'name', title: '名称',sort: true}
		      ,{field:'cateName', title: '分类',sort: true}
		      ,{field:'brandName', title: '品牌',sort: true}
		      ,{field:'status', title:'状态',templet: '#switchTpl'}
		      ,{field:'shopName', title: '店铺', minWidth: 150,sort: true}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		    ]]
		    ,page: true
		  });
		 //加载分类
		 loadCate();
		 //加载品牌
		 loadBrand();
		 //加载店铺
		 loadShop();
		 
		
		//监听状态操作
		form.on('switch(status)', function(obj){
		    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
		    
		    var id = obj.elem.attributes['no'].nodeValue;
            var checked = obj.elem.checked;
            var flag = 1;
            if(checked==false){
                flag = 0;
            }
            
            //发送ajax 请求修改显示状态
            $.getJSON("/pro/updSpuStatus",{id:id,status:flag},function (data) {
                if(data){
                	//表示操作成功
                }else{
                	layer.open({
	  					  type: 1, 
	  					  content: '<div style="padding: 20px 100px;">'+ '操作失败' +'</div>' //这里content是一个普通的String
					 });
                }
            })
		
		});
		
		$('.demoTable .layui-btn').on('click', function(){
			//获取ID
			var $id = $("#id").val()
			//获取姓名
			var $name =$("#name").val();
			//获取分类
			var $cateId = $("#cateId option:selected").val();
			//品牌			
			var $brandId = $("#brandId option:selected").val();
			//店铺
			var $shopId = $("#shopId option:selected").val();
			//状态
			var $status = $("#status option:selected").val();
			table.reload('test', {
				  where: { //设定异步数据接口的额外参数，任意设
					  id:$id,
					  name:$name,
					  cateId:$cateId,
					  brandId:$brandId,
					  shopId:$shopId,
					  status:$status
				  }
				  ,page: {
				    curr: 1 //重新从第 1 页开始
				  }
				}); 
		});
		form.render();
	});
</script>

<script type="text/javascript">
	$(function(){
		$(".del").click(function(){
			//获取编号
			var $no = $(this).attr("no");
			$.ajax({
	  			   type: "get",
	  			   url: "/pro/delSpu",
	  			   async: false,
	  			   data:{id:$no},
	  			   success:function(data){
	  				 	 if(data){
		  					$('.layui-body').load('/pro/toSpu');
		  				 }else{
		  					 layer.open({
			  					  type: 1, 
			  					  content: '<div style="padding: 20px 100px;">'+ '操作失败' +'</div>' //这里content是一个普通的String
		  					 });
		  				  }
	  			   }
			})
			
		})
	})
</script>

</body>
</html>
</body>
</html>